<template>
	<div class="sys-menu-container">
		<el-dialog v-model="isShowDialog" :append-to-body="true" destroy-on-close :title="props.title" width="70%" draggable="">
			<el-container>
				<el-main style="padding: 10px">
					<el-card class="box-card">
						<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
							<el-row :gutter="35">
								<el-form-item v-show="false">
									<el-input v-model="ruleForm.id" />
								</el-form-item>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="类型编码" prop="code">
										<el-input v-model="ruleForm.code" placeholder="请输入类型编码" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="类型名称" prop="name">
										<el-input v-model="ruleForm.name" placeholder="请输入类型名称" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="类型名称(英)" prop="english_Name">
										<el-input v-model="ruleForm.english_Name" placeholder="请输入类型名称" clearable />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="排序" prop="sort">
										<el-input-number v-model="ruleForm.sort" clearable controls-position="right" />
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="选择图片" prop="ImageUrl">
										<div class="resource-style-box" v-if="ruleForm.ImageUrl == undefined" @click="openresourceDialog('img')">
											<img class="xz-img" src="../../../../assets/addImg.png" />
											<p>选择图片</p>
										</div>
										<div class="resource-mouse-img" @mouseenter="handleMouseEnter('img')" @mouseleave="handleMouseLeave('img')" v-else>
											<img class="mouse-img" :src="imgList(ruleForm)" />
											<div class="show-mask-layer" v-if="state.showMaskLayerImg">
												<p class="mask-layer-p1" @click="openresourceDialog('img')">更换图片</p>
												<p class="mask-layer-p2" @click="delImg">删除图片</p>
											</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>
				</el-main>
			</el-container>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<Resource :limitNum="1" :fileType="state.fileType" :remind="state.remind" ref="resourceRef" @resourceVal="resourceVal" />
	</div>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import { Addcms_Label, Editcms_Label } from '/@/api/CMS/cms_label';
import '/@/views/CMS/cms_Template/common/tempStype.css';
import Resource from '/@/components/resource/index.vue';



const resourceRef = ref<InstanceType<typeof Resource>>();
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
});
const state = reactive({
	remind: '售后模板请按选择图片请按约72:25比例,其他比例将会影响效果！(高：25，宽：72)',
	fileType: '',
	showMaskLayerImg: false, //选择图片遮罩层状态
});
//父级传递来的函数，用于回调
const emit = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	code: [{ required: true, message: '请输入类型编码！', trigger: 'blur' }],
	name: [{ required: true, message: '请输入类型名称！', trigger: 'blur' }],
});
const imgList = (ruleForm: any) => {
	return window.__env__.VITE_API_URL + ruleForm.ImageUrl;
};
// 打开弹窗
const openDialog = (row: any) => {
	ruleForm.value = JSON.parse(JSON.stringify(row));
	if(!!ruleForm.value.imageUrl){
		ruleForm.value.ImageUrl=ruleForm.value.imageUrl
	}
	isShowDialog.value = true;
};
// 打开资源管理弹窗
const openresourceDialog = (type: any) => {
	state.fileType = type;
	resourceRef.value?.openDialog();
};
//资源管理回调
const resourceVal = (arr: any) => {
	console.log(state.fileType);
	if (state.fileType == 'img') {
		ruleForm.value.ImageUrl = arr[0].shortUrl;
	}
};
//删除选中图片
const delImg = () => {
	ruleForm.value.ImageUrl = undefined;
};
//选择图片鼠标移入显示遮罩层
const handleMouseEnter = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = true;
	}
};
//旋转图片鼠标移出隐藏遮罩层
const handleMouseLeave = (type: any) => {
	if (type == 'img') {
		state.showMaskLayerImg = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	emit('handleQuery');
	isShowDialog.value = false;
};
// 取消
const cancel = () => {
	isShowDialog.value = false;
};
// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
				// 编辑接口提交
				await Editcms_Label(values);
			} else {
				//新增接口提交
				await Addcms_Label(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
